<template>
  <div class="content-box">
    <!-- 搜索框 -->
    <MySearch seartitle="角色名称" />
    <!-- 添加 -->
    <Addlist :showadd="false" />
    <!-- 表格 -->
    <div class="table">
      <el-table :data="list" :cell-style="{ 'text-align': 'center' }" border>
        <el-table-column align="center" prop="id" label="编号"></el-table-column>
        <el-table-column align="center" prop="name" label="角色名称"></el-table-column>
        <el-table-column align="center" prop="description" label="描述"></el-table-column>
        <el-table-column align="center" prop="sort" label="用户数"></el-table-column>
        <el-table-column align="center" prop="createTime" label="添加时间"></el-table-column>
        <el-table-column align="center" prop="status" label="是否启用">
          <template #default="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="switchfn(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <div class="edit">
              <el-button size="small" text type='primary' @click="edit(scope.row.id)">分配资源</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
        :total="paginate.total" background @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import MySearch from '@/components/search/mySearch.vue'
import { reactive, Ref, ref, toRefs } from 'vue';
import * as http from "@/request/api"
import { useTable } from '@/hook/table'

import Addlist from '@/components/addlist/add.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
let keyword = ref('')
let params = reactive<AdminListParams>({
  keyword: keyword.value,
})
let { list, paginate, switchfn, handleSizeChange, handleCurrentChange } = useTable(http.admin.RoleList, params)

// 编辑弹框
function edit(id: number) {
  router.push({ name: 'allocResource', query: { id: id } })
}

</script>
  
<style scoped>
.content-box {
  padding: 10px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  color: gray;
}

.box-card .bottom input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  color: rgb(201, 191, 191);
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}


.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}
</style>